@import "./commonFun.less";

:root {
    .common-page {
        width: 100%;
        height: 100%;

        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            min-height: 60px;
            padding: 0 24px;
            border-bottom: 1px solid var(--borderColor);

            .page-title {
                font-size: 16px;
                font-weight: bold;
                color: var(--normalColor);
            }
        }

        .header-operate() {
            min-height: 60px;
            display: flex;
            justify-content: space-between;
            // align-items: center;
            padding: 14px 24px;
            flex: none;

            .operate-box {
                flex-wrap: nowrap;
            }

            .with-info {
                height: 60px;
            }

        }

        .page-sider {
            border-right: 1px solid var(--borderColor);

            .ant-layout-sider-children {
                display: flex;
                flex-direction: column;
            }

            .sider-header {
                .header-operate();

                .sider-title {
                    color: var(--normalColor);
                    font-weight: bold;
                    line-height: 32px;
                }
            }

            .sider-box {
                flex: auto;
                // overflow: hidden;
                padding: 0 24px 8px 24px;
                height: 100%;
                overflow: auto;

                .ant-tree-node-icon {
                    width: 20px;
                    height: 20px;
                }

                &.with-bottom-padding {
                    padding-bottom: 24px;
                }
            }

        }

        .page-content {
            display: flex;
            flex-direction: column;

            .content-header {
                .header-operate();

                .content-title {
                    color: var(--normalColor);
                    font-weight: bold;
                    line-height: 32px;
                }

                .ant-btn+.ant-btn {
                    margin-left: 8px;
                }
            }

            .content-box {
                width: 100%;
                flex: auto;
                padding: 0 24px 24px 24px;
                overflow: hidden;

                .operate-col {
                    display: inline-block;

                    .ant-btn-text {
                        height: 20px;
                    }

                    .ant-btn+.ant-btn {
                        margin-left: 16px;
                    }
                }

                .status-col {
                    justify-content: center;
                }
            }

            .table-box {
                position: relative;

                .ant-table {
                    // height: 100%;
                }
            }
        }

        .page-footer {
            flex: none;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            height: 60px;
            padding: 0 32px;
            box-shadow: 0px -4px 20px 0px rgba(0, 0, 0, 0.05);
            border-top: 1px solid var(--borderColor);
        }

        // header下面是tab切换的页面
        &.with-tab {

            .common-page-tabs {
                &>.ant-tabs-nav {
                    margin-bottom: 0;

                    &::before {
                        content: none;
                    }

                    &>.ant-tabs-nav-wrap {
                        padding: 0 24px;
                    }
                }
            }

            //     .common-page-tabs{
            //       border: 1px solid #E4E4E4;
            //       // 要不要设置最小宽高？？？
            //       &>.ant-tabs-content-holder>.ant-tabs-content{
            //         // overflow: auto;
            //         &>.ant-tabs-tabpane{
            //           // min-width: 1000px;
            //         }
            //       }
            //     }
        }
    }
}